import useStore from "@/common/hooks/useStore";
import { chromeEvent } from "@/event";
import { Button, Switch } from "antd";
import { useCallback, useState } from "react";
import { AgGridReact} from "ag-grid-react";
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { contentLog } from "@/common/utils";


export default function App () {
  // const [checked, setChecked] = useStore('isActive');
  // const onChange = useCallback(
  //   (val: boolean) => {
  //     setChecked(val);
  //     chromeEvent.emit('createContent', val, { type: 'tab' });
  //   },
  //   [setChecked],
  // );
  // return (
  //   <div>
  //     启用插件
  //     <Switch className="vision-open__switch" checked={checked} onChange={onChange} />
  //   </div>
  // )

  const [rowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 }
  ]);

  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ])

  const goFunc = () => {
    contentLog("==>goTab");
    chromeEvent.emit('createContent', true, { type: 'tab' });
  } 
  return (
    <>
      <Button onClick={goFunc}>Gogogo</Button>
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}>
        </AgGridReact>
      </div>
    </>

  );
}